import { NavBar, DatePicker } from 'antd-mobile'
import './year.scss'
import { useEffect, useMemo, useState } from 'react'
import classNames from 'classnames'
import dayjs from 'dayjs'
import lodash from 'lodash'
import { useSelector } from 'react-redux'
import MonthBill from '@/page/Year/components/monthBill/momthBill'

const Year = () => {
    //全部的账单列表
    const billList = useSelector(state => state.bill.billList)
    //时间选择器显示与否
    const [dateVisible, setDateVisible] = useState(false)
    //年份分组后的账单数据
    const [currentYearList, setYearList] = useState([])
    //年份key，初始为当前年
    const [currentYear, setCurrentYear] = useState(() => dayjs().format('YYYY'))
    //根据获取到的时间作为key,年分组的账单数组
    const yearGroup = useMemo(() => {
        return lodash.groupBy(billList, item => {
            return dayjs(item.date).format('YYYY')
        })
    }, [billList])

    //根据当前年的账单，以月为单位分组
    const monthGroup = useMemo(() => {
        const monthResult = lodash.groupBy(currentYearList, item => {
            return dayjs(item.date).format('YYYY-MM')
        })
        const monthKeys = Object.keys(monthResult)
        return {monthResult,monthKeys}
    }, [currentYearList])

    //时间选择器 确认事件
    const dateConfirm = (dateVal) => {
        setDateVisible(false)

        //年显示
        const yearyearKey = dayjs(dateVal).format('YYYY')
        setCurrentYear(yearyearKey)

        //按年分组后数据
        setYearList(yearGroup[yearyearKey])
    }

    //首次加载
    useEffect(()=>{
        const list = yearGroup[dayjs().format('YYYY')]
        if(list){
            setYearList(list)
        }
    },[yearGroup])

    // 计算统计
    const yearResult = useMemo(() => {
        if(currentYearList){
            //收入
            const income = currentYearList.filter(item => item.type === 'income')
                .reduce((a, c) => a + c.money, 0)
            //支出
            const pay = currentYearList.filter(item => item.type === 'pay')
                .reduce((a, c) => a + c.money, 0)
            return { income, pay, total: income + pay }
        }else{
            return { income:0, pay:0, total: 0 }
        }
    }, [currentYearList])

    return (
        <div className="yearBill">
            <NavBar className="nav" backIcon={false}>
                年度收支
            </NavBar>
            <div className="content">
                <div className="header">
                    {/* 时间切换区域 */}
                    <div className="date" onClick={() => setDateVisible(true)}>
                        <span className="text">
                            {currentYear}年账单
                        </span>
                        <span className={classNames({ 'arrow': true, 'expand': dateVisible })} ></span>
                    </div>
                    {/* 统计区域 */}
                    <div className='twoLineOverview'>
                        <div className="item">
                            <span className="money">{yearResult.pay.toFixed(2)}</span>
                            <span className="type">支出</span>
                        </div>
                        <div className="item">
                            <span className="money">{yearResult.income.toFixed(2)}</span>
                            <span className="type">收入</span>
                        </div>
                        <div className="item">
                            <span className="money">{yearResult.total.toFixed(2)}</span>
                            <span className="type">结余</span>
                        </div>
                    </div>
                    {/* 时间选择器 */}
                    <DatePicker
                        className="kaDate"
                        title="记账日期"
                        precision="year"
                        visible={dateVisible}
                        max={new Date()}
                        onClose={() => setDateVisible(false)}
                        onConfirm={dateConfirm}
                    />
                </div>
                {monthGroup.monthKeys.map((monthKey)=>{
                    return <MonthBill key={monthKey} monthKey={monthKey} monthBillList={monthGroup.monthResult[monthKey]}/>
                })}
            </div>
        </div >
    )
}

export default Year